<template>
  <n-tabs
    v-model:value="currentNav"
    type="line"
    size="small"
    justify-content="space-around"
    class="h-full"
    pane-class="h-full overflow-y-auto"
  >
    <n-tab-pane
      v-for="panel in nav"
      :key="panel.key"
      :name="panel.key"
      display-directive="show"
    >
      <template #tab>
        <n-tooltip trigger="hover" placement="bottom">
          <template #trigger>
            <n-icon size="18" class="px-1">
              <component :is="panel.icon"></component>
            </n-icon>
          </template>
          {{ panel.name }}
        </n-tooltip>
      </template>
      <component :is="panel.component"></component>
    </n-tab-pane>
  </n-tabs>
</template>

<script lang="ts" setup>
import { ref, markRaw } from "vue";
import { CubeOutline } from "@vicons/ionicons5";
import { LocationHeart } from "@vicons/carbon";
import Object3dCustom from "./assetsLibrary/Object3dCustom.vue";
import HtmlPlane from "./assetsLibrary/HtmlPlane.vue";

const currentNav = ref("object3dcustom");
const nav = ref([
  {
    key: "object3dcustom",
    name: "自定义3D对象",
    icon: markRaw(CubeOutline),
    component: markRaw(Object3dCustom),
  },
  {
    key: "htmlPlane",
    name: "Html面板",
    icon: markRaw(LocationHeart),
    component: markRaw(HtmlPlane),
  },
]);
</script>

<style scoped></style>
